<template>
  <view class="w-[750rpx] bg-[#f5f7fa] min-h-screen pb-[120rpx]">
    <!-- Header -->
    <view class="bg-[#2196F3] text-white p-[40rpx] rounded-[20rpx] mb-[40rpx] text-center shadow-lg mx-[40rpx] mt-[40rpx]">
      <text class="text-[48rpx] font-bold mb-[20rpx] block">信息发布平台</text>
      <text class="text-[28rpx] opacity-90">快速发布各类信息，精准匹配需求</text>
    </view>
    
    <!-- 发布卡片网格 -->
    <view class="grid grid-cols-2 gap-[30rpx] mb-[40rpx] mx-[40rpx]">
      <view 
        v-for="(item, index) in publishCards" 
        :key="index"
        class="bg-white rounded-[20rpx] p-[40rpx] text-center shadow-md transition-all duration-300 active:scale-95"
        @click="handleCardClick(item)"
      >
        <view class="text-[72rpx] mb-[20rpx] text-[#2196F3]">
          <IconFont :name="item.icon" />
        </view>
        <text class="text-[32rpx] font-bold mb-[10rpx] block">{{ item.title }}</text>
        <text class="text-[24rpx] text-[#666]">{{ item.desc }}</text>
      </view>
    </view>
    
    <!-- 最近发布列表 -->
    <view class="bg-white rounded-[20rpx] p-[30rpx] shadow-md mx-[40rpx]">
      <view class="flex justify-between items-center mb-[30rpx] pb-[20rpx] border-b border-[#eee]">
        <text class="text-[32rpx] font-bold">最近发布</text>
        <text class="text-[24rpx] text-[#2196F3]" @click="viewAll">查看全部 &gt;</text>
      </view>
      
      <view v-if="recentList.length > 0">
        <view 
          v-for="(item, index) in recentList" 
          :key="index"
          class="py-[24rpx] border-b border-[#f5f5f5] flex justify-between items-center"
          :class="{ 'border-b-0': index === recentList.length - 1 }"
        >
          <view class="flex-1 mr-[20rpx]">
            <text class="text-[28rpx] mb-[10rpx] block">{{ item.title }}</text>
            <text class="text-[24rpx] text-[#999]">{{ item.info }}</text>
          </view>
          <text class="text-[#ff6b6b] font-bold text-[28rpx] whitespace-nowrap">{{ item.price }}</text>
        </view>
      </view>
      
      <view v-else class="text-center py-[60rpx] text-[#999] text-[28rpx]">
        暂无发布记录
      </view>
    </view>
    
    <!-- Footer -->
    <view class="text-center mt-[60rpx] mb-[40rpx] text-[#999] text-[24rpx]">
      <text class="block">© 2023 信息发布平台 | 客服电话：400-123-4567</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import Taro from '@tarojs/taro'

// 发布卡片数据
const publishCards = ref([
  {
    icon: 'bullhorn',
    title: '发布招聘信息',
    desc: '快速找到合适人才',
    path: '/pages/post/recruitment'
  },
  {
    icon: 'award',
    title: '发布悬赏任务',
    desc: '高额奖励吸引高手',
    path: '/pages/post/reward'
  },
  {
    icon: 'tasks',
    title: '发布普通任务',
    desc: '简单任务快速完成',
    path: '/pages/post/task'
  },
  {
    icon: 'calendar-check',
    title: '发布签到任务',
    desc: '长期稳定的参与',
    path: '/pages/post/checkin'
  },
  {
    icon: 'chalkboard-teacher',
    title: '发布课程',
    desc: '分享知识技能',
    path: '/pages/post/course'
  },
  {
    icon: 'list-ul',
    title: '我的发布',
    desc: '查看管理已发布内容',
    path: '/pages/post/my-publish'
  }
])

// 最近发布列表数据
const recentList = ref([
  {
    title: '招聘前端开发工程师',
    info: '发布于2023-07-20 | 已有15人申请',
    price: '15-30K'
  },
  {
    title: '网站UI设计悬赏',
    info: '发布于2023-07-19 | 8人参与',
    price: '¥2000'
  },
  {
    title: 'Python入门课程',
    info: '发布于2023-07-18 | 32人报名',
    price: '¥199'
  },
  {
    title: '每日签到领积分',
    info: '长期有效 | 56人参与',
    price: '+5分'
  }
])

// 处理卡片点击
const handleCardClick = (item: any) => {
  Taro.showToast({
    title: `点击了：${item.title}`,
    icon: 'none',
    duration: 1500
  })
  
  // 实际项目中这里会跳转到对应的发布页面
  // Taro.navigateTo({
  //   url: item.path
  // })
}

// 查看全部
const viewAll = () => {
  Taro.showToast({
    title: '查看全部发布',
    icon: 'none',
    duration: 1500
  })
  
  // 实际项目中这里会跳转到全部列表页面
  // Taro.navigateTo({
  //   url: '/pages/post/all-list'
  // })
}

// 页面显示时设置 tabbar 选中状态
onMounted(() => {
  // 页面加载完成
  console.log('发布页面加载完成')
})
</script> 